<template>
 <div class="pd10 ">
    <div class="con-wrapper">
      <div class="title">
          <span class="icon icon02"></span>{{title}}
      </div>
      <div class="resume">
        <p class="name">韩月</p>
        <ul class="info" >
           <li v-for="item in jbxxList" :key="item.id">{{item.qzxx}}</li>
        </ul>
        <p><span style="margin-right:10px;">1048121692@qq.com</span><span>+86 18745112170</span></p>
        <div class="title">求职意向</div>
        <ul class="info" >
          <li v-for="item in qzxxList" :key="item.id">{{item.qzxx}}</li>
        </ul>
        <div class="title">教育经历</div>
        <div class="flex-p">
          <span>哈尔滨师范大学.教育技术  本科</span>
          <span class="blue">2009.9 - 2013.8</span>
        </div>
        <div class="title">工作经历</div>
        <div class="flex-p">
          <span>北京赢科哈尔滨分公司  /  研发部  /  前端开发</span>
          <span class="blue">2015.8 - 至今</span>
        </div>
        <div class="title">项目经历</div>
        <div class="txt-c font-1rem ptb20 gray-bg">
          <a class="blue" href="#" @click="changeTab">见项目展示</a>
          <span class="blue"></span>
        </div>
        <div class="title">个人技能</div>
        <ul class="ul01">
          <li v-for="(item,index) in grjnList" :key="index">{{ item }}</li>
        </ul>
      </div>

    </div>
 </div>
</template>

<script>
 export default {
    name:'userCenter',
   data () {
     return {
       title:'个人中心',
       jbxxList:[
         {id:'0',qzxx:'5年工作经验'},
         {id:'1',qzxx:'31岁'},
         {id:'2',qzxx:'女'},
       ],
       qzxxList:[
         {id:'0',qzxx:'求职岗位：前端开发'},
         {id:'1',qzxx:'意向城市：黑龙江哈尔滨'},
         {id:'2',qzxx:'期望薪资：8-10k'},
         {id:'3',qzxx:'到岗时间：月内到岗'},
       ],
       grjnList:['熟练使用HTML/CSS/JS。',
'熟悉前端开发技术，包括jquery、vue全家桶、ES6语法、less/sass语法等。',
'熟练使用iview、elementUI、bootstrap等UI框架实现页面样式。',
'熟悉微信小程序，公众号开发，使用uniapp框架进行app开发。',
'熟练使用vscode，idea，hbuilder等开发工具。',
'掌握svn，git等版本控制软件。']
       
     }
   },
   methods: {
     changeTab(){
       this.$parent.tab(0);
     }
   }
 }
</script>

<style scoped lang="scss">
.resume{
  width:50%;
  margin: 0 auto;
  text-align: left;
  line-height: 1.5;
  font-size:1rem;
  .name{
    font-size:2rem;
    line-height: 2;
  }
  .info{
    li{
      display: inline-block;
      font-size:1rem;
      line-height: 1;
      padding-right:16px;
      margin:0 16px 8px 0;
      border-right:1px solid #ddd;
      &:last-child{
        border-right-color: transparent;
      }
    }
  }
  .title{
    color:#688dc5;
    font-size:1.125rem;
    padding:0;
    margin:24px 0;
    position: relative;
    &::after{
      content:'';
      position: absolute;
      top:8px;
      right:0;
      width:86%;
      height:1px;
      border-bottom:1px solid #dae1ec;

    }
  }
  .flex-p{
    display: flex;
    justify-content: space-between;
  }
  .ul01{
    line-height: 2;
  }
}

@media screen and (max-width: 800px) {
  .isMobile{

  
   .resume{
     width:96%;
     .flex-p{
       display: initial;
     }
   }
   .title{
     &::after{
       width:70%
     }
   }
  }
} 
</style>
